<!-- header -->
<template>
	<div class="header">
		<div class="title-bg">
			<div class="title" @click="reset">{{ title }}</div>
		</div>

		<div class="right">
			<!-- <Weather /> -->
			<div class="time DIN">
				{{ time }}
			</div>
			<div class="date DIN">
				{{ date }}
			</div>
			<div class="week">
				{{ week }}
			</div>
			<Weather />
			<!-- <div class="user">
				<img src="@/assets/images/global/user.png" alt="" @click="toUserMess" />
	
			</div> -->
			<div class="user">
				<el-dropdown
					@command="handleCommand"
					class="right-menu-item hover-effect"
					trigger="click"
					popper-class="right-menu-item-popper"
					:teleported="false"
				>
					<div class="avatar-wrapper">
						<img :src="userStore.avatar" class="user" />
						<!-- <el-icon><caret-bottom /></el-icon> -->
					</div>
					<template #dropdown>
						<el-dropdown-menu>
							<el-dropdown-item command="message">
								<span>消息中心</span>
							</el-dropdown-item>
							<el-dropdown-item divided command="logout">
								<span>退出登录</span>
							</el-dropdown-item>
						</el-dropdown-menu>
					</template>
				</el-dropdown>
			</div>
		</div>
		<!-- 导航菜单 -->
		<div class="header-bar">
			<div
				class="item"
				v-for="item in headerBar"
				:key="item.id"
				:class="{ active: item.name == activeItem?.name }"
				@click="clickItem(item)"
			>
				<div class="bar-title">
					{{ item.name }}
				</div>
			</div>
			<div v-if="dataManageBar.length > 0" class="item dropdown" :class="{ active: activeItem?.name == '数据管理' }">
				<button class="dropbtn">
					数据管理
				</button>
				<div v-if="dataManageChildren && dataManageChildren[0].children.length > 0" class="dropdown-content">
					<a v-for="dmItem in dataManageChildren[0].children" :key="dmItem.id" href="#" @click.prevent="jumpMenu(dmItem)"><i class="fas fa-laptop"></i> {{ dmItem.name }}</a>
				</div>
			</div>
		</div>
	</div>

	<MessageBox v-if="isMessageBoxVisible" :message="message" @confirm="handleConfirm" @cancel="handleCancel" />
</template>

<script lang="ts" setup>
	import Dayjs from 'dayjs'
	// import MessageBox from '@/components/messageBox.vue'
	import { onMounted, onUnmounted, ref, nextTick } from 'vue'
	import { computed } from 'vue'
	import { useRouter, useRoute } from 'vue-router'
	import router from "../../router/index"
	import { getMenu, getMenuTree } from '@/api/admin'
	import { time, date, week, sceneObj } from '@/global/index'
	import { useAirCityStore } from '@/stores/aircity'
	import useUserStore from '@/stores/user'
	import { ElMessageBox } from 'element-plus'

	const route = useRoute()

	const airStore = useAirCityStore()
	const userStore = useUserStore()
	//@ts-ignore
	const title = computed(() => common_config.title)
	const isMessageBoxVisible = ref(false)
	const message = '确定要退出登录吗？'
	const reset = () => {
		common_config.reset()
	}
	const headerBar = ref<any[]>([]);
	const dataManageBar = ref([]);
	const dataManageChildren = ref<any[]>([
		{ children: []}
	]);

	onMounted(async () => {
		await getMenu().then((menuRes: any) => {
			console.log("menuRes.datamenuRes.data===, ", menuRes.data);
			userStore.setMenuinfo(menuRes.data)
			headerBar.value = menuRes.data.filter((hbItem: any) => {
				return hbItem.parentId == 1 && hbItem.name != "仪表盘" && hbItem.name != "系统管理" && hbItem.url != "dataManage"
			});
			dataManageBar.value = menuRes.data.filter((hbItem: any) => {
				return hbItem.url == "dataManage"
			});
			// activeItem.value = headerBar.value.find((item: any) => item.url == route.url);
      console.log("route.value ", route);
			// dmActivateItem.value = headerBar.value.find((item: any) => item.url == route.name);
      if (route.name == 'subwayStation' || route.name == 'busStation' || route.name == 'entranceCrowd' || route.name == 'subwayPassengerCount'
          || route.name == 'railwayTrain' || route.name == 'passengerFlow') {
        activeItem.value = { icon:  "Postcard", id: 53, name: "数据管理", parentId: 1, url: "dataManage" }; 
      } else {
        activeItem.value = headerBar.value.find((item: any) => item.url == route.name)
      }
      console.log("activeItem.value ", activeItem.value);
			// if (!activeItem.value) {
			// 	activeItem.value = dataManageBar.value.find((item: any) => item.url == route.name);
      //   console.log("dataManageBar.value ", dataManageBar.value);
			// 	console.log("activeItem.value ", activeItem.value);
			// }
		});
		await getMenuTree().then((treeRes: any) => {
			dataManageChildren.value = treeRes.data.filter((hbItem: any) => {
				return hbItem.url == "dataManage"
			});
			console.log("dataManageChildren，",dataManageChildren.value);
		});
		// activeItem.value = headerBar.value.find((item: any) => item.path == route.name)
	})

	// const headerBar = ref([
	// 	{
	// 		name: '首页',
	// 		path: 'Index',
	// 	},
	// 	{
	// 		name: '场景展示',
	// 		path: 'SceneDisplay',
	// 	},
	// 	{
	// 		name: '客流模拟',
	// 		path: 'StationLayout',
	// 	},
	// 	{
	// 		name: '统计分析',
	// 		path: 'StatisticalAnalysis',
	// 	},
	// 	{
	// 		name: '消息中心',
	// 		path: 'InfoPush',
	// 	},
	// ])
	const jumpMenu = async (item: any) => {
		console.log("item ", item);
		// activeItem.value = dmActivateItem.value;
    activeItem.value = { icon:  "Postcard", id: item.parentId, name: "数据管理", parentId: 1, url: "dataManage" }; 
    console.log("jumpMenu activeItem.value ", activeItem.value);
    await nextTick();
		router.push({
			name: `${item.url}`,
			query: {
				parentId: item.id,
				name: item.name,
				url: `/home/${item.url}`
			}
		})
	}
	const activeItem = ref<any>();
	const dmActivateItem = ref<any>()
	const clickItem = async (item: any) => {
		if (item.url== "dataManage") {
			dmActivateItem.value = item;
		};
		if (item.name== "后台管理系统" || item.url.indexOf("http://") > -1) {
			window.open(item.url)
		} else {
      if (item.name == "场景展示" || item.name == "客流模拟") {
        dmActivateItem.value = item;
        await fdapi.camera.unlock()
        fdapi.camera.set([12946565.104062, 4843476.616445, 313.921289, -13.066213, -126.80352, 0.000001], 0)
        sceneObj.value.weatherTime = 33.3
      };

			activeItem.value = item
			!item.disable && router.push({
				name: item.url,
				query: {
					parentId: item.id,
					name: item.name,
					url: item.url
				}
			})

      if (item.name == "场景展示" || item.name == "客流模拟") {
        fdapi.infoTree.show(airStore.GetTreeIdByName(['丰台站周边影像地形', '轨道', '丰台地面', '售票机排队']))
      };
		}
	}
	const toUserMess = () => {
		router.push({ name: 'InfoPush' })
		activeItem.value = headerBar.value.find((item: any) => item.url == 'InfoPush')
	}
	function handleCommand(command: string) {
		switch (command) {
			case 'message':
				toUserMess()
				break
			case 'logout':
				isMessageBoxVisible.value = true
				break
			default:
				break
		}
	}
	const handleConfirm = () => {
		console.log('确认操作')
		isMessageBoxVisible.value = false

		userStore.logOut()
		// userStore.logOut().then(() => {
		// 	// location.href = import.meta.env.VITE_APP_CONTEXT_PATH + 'index';
		// 	location.href = window.origin
		// })
	}

	const handleCancel = () => {
		console.log('取消操作')
		isMessageBoxVisible.value = false
	}
</script>
<style lang="scss" scoped>
	.header {
		position: relative;
		display: flex;
		background-image: linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 1) 100%);
		width: 100%;
		height: $headerHeight;
		// background-image: url(@/assets/images/global/header-bg.png);
		background-size: 100% 100%;
		top: 0;
		font-size: 16px;
		z-index: 99999;
		align-items: center;
	}
	.title-bg {
		width: 2689px;
		height: 100%;
		background-image: url(@/assets/images/global/header-title.png);
		background-size: 100% 100%;
	}
	.title {
		font-size: 80px;
		font-family: TITLE;
		margin-left: 150px;
		// margin-top: -20px;
		line-height: $headerHeight;
		letter-spacing: 10px;
		background: linear-gradient(180deg, #ffffff 0%, #5fb3ff 139%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		background-clip: text;
	}
	.right {
		position: absolute;
		right: 50px;
		display: flex;
		.time {
			// margin-left: 15px;
			// width: 200px;
			font-size: 45px;
			font-weight: bolder;
			display: flex;
			align-items: end;
		}
		.date,
		.week {
			// width: 300px;
			font-size: 28px;
			font-weight: bolder;
			display: flex;
			align-items: end;
			margin-left: 20px;
		}
		.date {
			font-weight: normal;
		}
		.user {
			width: 90px;
			height: 90px;
			// margin-left: 25px;
			position: relative;
			border-radius: 50%;
			img {
				width: 100%;
				height: 100%;
				border: 4px solid #5fb3ff;
			}
			.el-dropdown {
				width: 100%;
				height: 100%;
			}

			// .mess {
			// 	position: absolute;
			// 	width: 50px;
			// 	height: 50px;
			// 	display: flex;
			// 	justify-content: center;
			// 	align-items: center;
			// 	font-size: 36px;
			// 	right: 0;
			// 	bottom: 0px;
			// 	border-radius: 50%;
			// 	background-color: red;
			// 	transform: translate(50%, 50%);
			// }
		}
	}

	.header-bar {
		position: absolute;
		display: flex;
		top: 68px;
		left: 1241px;
		z-index: 999;
		.item {
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 30px;
			cursor: pointer;
			width: 350px;
			height: 88px;
			color: #85a0b8;
			background-image: url(@/assets/images/global/header-item.png);
			background-size: 100% 100%;
			.bar-title {
				background: linear-gradient(180deg, rgba(133, 160, 184, 1) 0%, rgba(133, 160, 184, 1) 139%);
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
				background-clip: text;
				font-weight: bolder;
			}
			&.active {
				background-image: url(@/assets/images/global/header-item-active.png);

				.bar-title {
					background: linear-gradient(180deg, #ffffff 0%, #5fb3ff 139%);
					-webkit-background-clip: text;
					-webkit-text-fill-color: transparent;
					background-clip: text;
				}
			}
		}
		.dropdown {
			position: relative;
			display: inline-block;
			// width: 200px;
			width: 350px;
			height: 88px;
			text-align: center;
			line-height: 88px;
			color: #85a0b8;
			background-image: url(@/assets/images/global/header-item.png);
			background-size: 100% 100%;
		}

		.dropbtn {
			background-color: transparent;
			// color: #333;
			// padding: 16px 24px;
			width: 350px;
			height: 88px;
			text-align: center;
			line-height: 88px;
			font-size: 30px;
			color: #85a0b8;
			background-image: url(@/assets/images/global/header-item.png);
			background-size: 100% 100%;
			border: none;
			// border-radius: 8px;
			cursor: pointer;
			width: 100%;
			// display: flex;
			// align-items: center;
			// justify-content: space-between;
			// box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
			// transition: all 0.3s ease;
		}

		.dropdown-content {
			display: none;
			position: absolute;
			// background-color: rgba(255, 255, 255, 0.95);
			background-color: rgb(11, 70, 132);
			min-width: 100%;
			box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
			border-radius: 8px;
			z-index: 1;
			font-size: 25px;
			overflow: hidden;
			// transform: translateY(10px);
			opacity: 0;
			transition: all 0.4s ease;
			color: #fff;
		}

		.dropdown:hover .dropdown-content {
			display: block;
			// transform: translateY(0);
			opacity: 1;
		}

		.dropdown-content a {
			color: #fff;
			padding: 14px 20px;
			text-decoration: none;
			display: flex;
			align-items: center;
			gap: 12px;
			// transition: all 0.2s ease;
			border-bottom: 1px solid rgba(0, 0, 0, 0.05);
		}

		.dropdown-content a:last-child {
			border-bottom: none;
		}

		.dropdown-content a:hover {
			background-color: #f5f5f5;
			padding-left: 25px;
			color: #1a73e8;
		}
	}
	.custom-message-box {
		z-index: 9999; /* 确保弹窗在最上层 */
		width: 400px; /* 调整宽度 */
		height: 200px; /* 调整高度 */
	}
	.avatar-wrapper {
		width: 100%;
		height: 100%;
	}
</style>
